<template name="zEnrollItemPanel">
	<view class="border-view dashboard">
		<view v-if="true">
			<text style="margin-left:15upx;" class="little-font-size">所有带<text class="tip">*</text>的为必填项</text>
			<view style="position:absolute;right:15upx;" v-show="isEdit" class="row-arrange">
				<text class="little-font-size" style="margin-top:10upx;">交换组件顺序</text>
				<switch @change="adjustOrder=!adjustOrder" color="green" style="margin-top:-5upx;margin-left:10upx;"/>
			</view>
		</view>
		
		<view class="enroll-item dashboard" v-for="(question,index) in ques" :key="index">
			<!-- <view style="align-item:left;width:80%;"> -->
			<view class="enroll-title">
				<text class="question">
					{{index+1}}.<text v-if="question.type != 'zdescpic'">{{question.question}}</text>
					<text class="tip" v-if="question.answer.empty==false ||(question.type != 'zcheckbox' && question.type != 'ztext')">*</text>
					<text v-if="question.type=='zcheckbox'">
						<text class="restrict-tip" v-if="minNum>0">至少{{question.answer.minNum}}项<text class="restrict-tip" v-if="maxNum != -1">，</text></text>
						<text class="restrict-tip" v-if="maxNum!=-1">至多{{question.answer.maxNum}}项</text>
					</text>
				</text>
			</view>

			<view class="enroll-component">
			<ztext class="full-width" v-if="question.type=='ztext'" :que="question.question" :restrict="question.answer.restrict" :length="question.answer.length" :empty="question.answer.empty" :ref="question.key" />
			<zradio class="full-width" v-if="question.type=='zradio'" :que="question.question" :choices="question.answer.choices" :empty="false" :ref="question.key" />
			<zcheckbox class="full-width" v-if="question.type=='zcheckbox'" :que="question.question" :choices="question.answer.choices" :minNum="question.answer.minNum" :maxNum="question.answer.maxNum" :ref="question.key" />
			<zpicker class="full-width" v-if="question.type=='zpicker'" :que="question.question" :choices="question.answer.choices" :empty="false" :ref="question.key" />
			<zpicture class="full-width" v-if="question.type=='zpicture'" :isEdit="isEdit" :noUpload="noUpload" :que="question.question" :maxSize="question.answer.maxSize" :empty="question.answer.empty" :ref="question.key"/>
			<zlocation class="full-width" v-if="question.type=='zlocation'" :que="question.question" :precision="question.answer.precision" :ref="question.key"/>
			<ztime class="full-width" v-if="question.type=='ztime'" :que="question.question" :precision="question.answer.precision" :interval="question.answer.interval" :ref="question.key"/>
			<zpic class="full-width" v-if="question.type == 'zdescpic'" :width="question.answer.width" :height="question.answer.height" :srcJson="question.answer.src"/>
			</view>
			<image v-show="!adjustOrder" class="enroll-button" v-if="isEdit" @click.stop="deleteQuestion(question.key)" style="height:100upx" src="../../static/delete.svg"></image>

			<image v-show="adjustOrder" class="enroll-up" v-if="isEdit" @click.stop="upQuestion(question.key)" style="height:100upx" src="../../static/up.svg"></image>
			<image v-show="adjustOrder" class="enroll-button" v-if="isEdit" @click.stop="downQuestion(question.key)" style="height:100upx" src="../../static/down.svg"></image>
			<!-- <button class="enroll-button" v-if="isEdit" @click="deleteQuestion(question.key)">×</button> -->
			<!-- </view> -->
			<!-- {{question.question}} -->
		</view>
		


		<view class="center-view new-item-view dashboard" v-show="addStatus">
			<!-- <view><label>问题：</label><input style="background-color:blue;" v-model="que"/></view> -->
			<!-- <view><label>关键字(用于导出)：</label><input style="background-color:blue;margin-right:150upx;" v-model="key"/></view> -->
			<view class="creator-item">
				<text class="item-name">类型</text>
				<picker class="item-content" @change="changeType" :value="typeIndex" :range="pickerTypes" style="margin-right:10upx;">
					<view style="font-size:40upx;">{{pickerTypes[typeIndex]}}</view>
				</picker>
			</view> 
			<view v-if="typeIndex == 0" class="full-width">
				<zTextCreate :ref="'ztext-create'"/>
			</view>
			<view v-if="typeIndex == 1" class="full-width">
				<zRadioCreate :ref="'zradio-create'"/>
			</view>
			<view v-if="typeIndex == 2" class="full-width">
				<zCheckboxCreate :ref="'zcheckbox-create'"/>
			</view>
			<view v-if="typeIndex == 3" class="full-width">
				<zPickerCreate :ref="'zpicker-create'"/>
			</view>
			<view v-if="typeIndex == 4" class="full-width">
				<zTimeCreate :ref="'ztime-create'"/>
			</view>
			<view v-if="typeIndex == 5" class="full-width">
				<zPictureCreate :ref="'zpicture-create'"/>
			</view>
			<view v-if="typeIndex == 6" class="full-width">
				<zDescpicCreate :ref="'zdescpic-create'"/>
			</view>
			<view v-if="typeIndex == 7" class="full-width">
				<zLocationCreate :ref="'zlocation-create'"/>
			</view>
			<view v-if="typeIndex == 8" class="full-width">
				<zNationCreate :ref="'znation-create'"/>
			</view>
			<view v-if="typeIndex == 9" class="full-width">
				<zPolityCreate :ref="'zpolity-create'"/>
			</view>

			<view class="col-arrange full-width">
				<button @click="submitAdd" type="primary" class="long-green-button">提交</button>
				<button @click="backAdd" class="long-green-button" style="background-color:red;margin-bottom:5upx">返回</button>
			</view>
		</view>
		<view class="center-view" v-if="isEdit" @click="addQuestion" v-show="!addStatus">
			<view class="center-view" style="border:1upx dashed gray;width:80%">
				<image @click="templetMain" style="height:100upx" src="../../static/add.svg"></image>
				<text style="color:gray">添加报名输入框</text>
			</view>
		</view>
		
		<!-- <view class="center-view" v-if="isEdit">
			<view>
				<button @click="addQuestion" v-show="!addStatus">添加报名项</button>
			</view>
		</view> -->


	</view>
</template>

<script>
	import ztext from "./enrollcomp/ztext";
	import zTextCreate from "./creator/ztext-create";
	import zradio from "./enrollcomp/zradio";
	import zRadioCreate from "./creator/zradio-create"
	import zcheckbox from "./enrollcomp/zcheckbox";
	import zCheckboxCreate from "./creator/zcheckbox-create"
	import zpicker from "./enrollcomp/zpicker";
	import zPickerCreate from "./creator/zpicker-create"
	import zpicture from "./enrollcomp/zpicture"
	import zPictureCreate from "./creator/zpicture-create"
	import zPolityCreate from "./creator/zpolity-create"
	import zNationCreate from "./creator/znation-create"
	import zLocationCreate from "./creator/zlocation-create"
	import zlocation from "./enrollcomp/zlocation"
	import zTimeCreate from "./creator/ztime-create"
	import ztime from "./enrollcomp/ztime"
	import zDescpicCreate from "./creator/zdescpic-create"
	import zpic from "./enrollcomp/zpic"
	export default {
		name : "zEnrollItemPanel",
		components : {
			ztext,
			zTextCreate,
			zradio,
			zRadioCreate,
			zcheckbox,
			zCheckboxCreate,
			zpicker,
			zPickerCreate,
			zpicture,
			zPictureCreate,
			zPolityCreate,
			zNationCreate,
			zLocationCreate,
			zlocation,
			zTimeCreate,
			ztime,
			zDescpicCreate,
			zpic
		},
		data() {
			return {
				enrollData : {},
				title : "",
				addStatus : false,
				// 答案类型
				pickerTypes : ["文本","单选","多选","滚动选择","时间选择","图片上传","题目描述图片","籍贯/居住地选择","民族选择","政治面貌选择"],
				pickerRefs : ["ztext-create","zradio-create","zcheckbox-create","zpicker-create","ztime-create","zpicture-create","zdescpic-create","zlocation-create","znation-create","zpolity-create"],
				typeIndex : 0,
				adjustOrder : false,
				ques : [],
				curId : 0
			};
		},
		props : { 
			questions : {
				type : Array,
				default : []
			},
			isEdit : {
				type : Boolean,
				default : false
			},
			noUpload : {
				type : Boolean,
				default : true
			}
		},
		created : function(){
			if(this.questions.length == 0){
				this.curId = 0;
			}else{
				this.curId = ('' + this.questions[this.questions.length - 1].key).substring(1);
			}
			this.curId ++;
			this.ques = this.questions;
			// console.log(this.curId)
		},
		methods: {
			getQue : function(){
				return this.ques;
			},
			submitAdd : function(){
				var refs = this.$refs;
				var obj = refs[this.pickerRefs[this.typeIndex]];
				console.log(obj);
				if(this.typeIndex != 6){
					var question = obj.get(this.curId++);
					// console.log(question)
					if(this.ques != null)
						this.ques.push(question);
				}else{
					obj.get(this.curId++,this.ques);
				}
				console.log(this.ques);
				
			},
			addQuestion : function(){
				this.addStatus = true;
			},
			backAdd : function(){
				this.addStatus = false;
			},
			changeType : function(e){
				this.typeIndex = e.target.value;
				this.choices = [""]
			},
			deleteQuestion : function(key){
				// console.log(key);
				var vm = this;
				uni.showModal({
					title : '删除项目',
					content : '您确定删除该问题吗？',
					success : function(res){
						if(res.confirm){

							for(var i=0;i<vm.ques.length;i++){
								if(vm.ques[i].key == key){
									vm.ques.splice(i,1);
								}
							}
						}
					}
				})
			},
			upQuestion : function(key){
				// this.questions = []
				// console.log("???")
				for(var i=0;i<this.ques.length;i++){
					if(this.ques[i].key == key){
						if(i != 0){
							var tempOption = this.ques[i - 1];
		                    this.$set(this.ques, i - 1, this.ques[i]);
		                    this.$set(this.ques, i, tempOption);
						}
						return;
					}
				}
				
			},
			downQuestion : function(key){
				for(var i=0;i<this.ques.length;i++){
					if(this.ques[i].key == key){
						if(i != this.ques.length - 1){
							var tempOption = this.ques[i + 1];
		                    this.$set(this.ques, i + 1, this.ques[i]);
		                    this.$set(this.ques, i, tempOption);
						}
						return;
					}
				}
			},
			getAns : function(){
				// console.log('??? is ' + this.questions)
				var answers = [];
				var refs = this.$refs;
				// console.log(refs);
				for(var ref in refs){
					if(ref[0] != 'q'){
						continue;
					}
					var obj = refs[ref][0];
					// if(obj.type == 'zpic')
					// var tag = '' + obj.$vnode.tag;
					// var parts = tag.split('-');
					// var type = parts[parts.length - 1];
					var type = obj.compType;
					var value = obj.get();
					if(value == null){
						return null;
					}
					var answer = {'que' : obj.que,'ans' : value,'type' : type};
					answers.push(answer);
				}
				// console.log(answers);
				// return null;
				return answers;
			}
		}
	}
</script>

<style>
	@import "../../common/zcss.css";
	.border-view{
		flex-direction: column;
		position: relative;
	}
	.question{
		display: inline;
		font-size: 15upx;
	}
	/* #answer-view{
		flex-direction: row;
	} */
	.restrict-tip{
		color: blue;
		font-size: 30upx;
	}
	.tip{
		padding-top: 5upx;
		margin-left: 5upx;
		color: red;
		font-size: 30upx;
	}
	.row-arrange{
		flex-direction: row;
	}
	.enroll-view{
		width: 100%;
		flex-direction: column;
	}
	.center-view{
		width:100%;
		display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
	}
	.new-item-view{
		border: 1upx solid black;
		width: 99%;
		margin-top: 10px;
		/* background-color: white; */
		margin-bottom: 10upx;
	}
	.enroll-item{
		border: 1upx solid gray;
		/* height: 150upx; */
		position: relative;
		width: 100%;
		margin-bottom: 10upx;
		flex-direction: column;
	}
	.enroll-button{
		position: absolute;
		font-size:20upx;
		height:60upx;
		width: 50upx;
		
		padding-bottom: 1000upx;
		top:-20upx;
		right: 1%;
	}
	.enroll-up{
		position: absolute;
		font-size:20upx;
		height:60upx;
		width: 50upx;
		
		padding-bottom: 1000upx;
		top:-20upx;
		right: 10%;
	}
	.enroll-title{
		/* position: absolute; */
		margin-left: 8upx;
		/* display: block; */
		left: 1%;
		top: 1%;
	}
	
	.enroll-component{
		/* display: block; */
		/* width: 100%; */
		/* height : 300upx; */
		margin-left: 10upx;
	}
	.question{
		/* display: inline; */
		font-size: 40upx;
	}
	.creator-item{
		border-bottom: 1upx solid gray;
		border-top: 1upx solid gray;
		width: 100%;
		height:70upx;
		padding-top: 10upx;
		position: relative;
	}
	.item-name{
		position: absolute;
		left: 1%;
		color: gray;
		top:10upx;
		font-size:40upx;
	}
	.item-content{
		position: absolute;
		right: 1%;
		top:10upx;
		font-size:40upx;
	}
</style>
